<template>
  <div class>
    <el-table
      v-loading="state.loading"
      :data="state.tableData"
      header-cell-class-name="eltablebg"
      style="width: 100%;margin-bottom:30px"
    >
      <el-table-column
        prop="created_at"
        :label="$t('assets.time')"
      ></el-table-column>
      <!-- <el-table-column
        prop="currency_name"
        :label="$t('assets.currency')"
      ></el-table-column> -->
      <el-table-column prop :label="$t('assets.currency')">
        <template #default="r">
          <span>
            {{
              r.row.currency.code
              
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="withdraw_amount" :label="$t('assets.amount')">
        <template #default="r">{{ $currency(r.row.number) }}</template>
      </el-table-column>
      <el-table-column prop :label="$t('assets.status')">
        <template #default="r">
          <span>
            {{
              r.row.status_name
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="withdraw_fee" :label="$t('assets.handlingFee')">
        <template #default="r">{{ $currency(r.row.fee) }}</template>
      </el-table-column>
      <el-table-column
        prop="number"
        :label="$t('assets.ReceivingAccount')"

      >
      </el-table-column>
      <el-table-column prop :label="$t('assets.actuallyArrived')">
        <template v-slot="r">
          <span>{{
            // $currency(reduceFix(r.row.withdraw_amount, r.row.withdraw_fee))
            $currency(r.row.address)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop :label="$t('assets.status')" v-if="type === 2">
        <template v-slot="r">
          <span>
            {{
              r.row.withdraw_status === 1
                ? $t("assets.underReview")
                : r.row.withdraw_status === 2
                ? $t("assets.successTip")
                : r.row.withdraw_status === 3
                ? $t("assets.chainSuccess")
                : r.row.withdraw_status === 4
                ? $t("assets.chainFail")
                : r.row.withdraw_status === 5
                ? $t("assets.auditNotPassed")
                : $t("assets.revokeWithdraw")
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('assets.remark')" v-if="isShowWithdrawNote">
        <template v-slot="r">
          <el-popover
            placement="top-start"
            :width="150"
            trigger="hover"
            :content="r.row.withdraw_note"
          >
            <template #reference>
              <div class="text-ellipsis-3">
                {{ r.row.withdraw_note }}
              </div>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop
        :label="$t('assets.operate')"
        v-if="state.flag && type === 1"
      >
        <template v-slot="r">
          <span
            class="personlink point"
            v-if="r.row.withdraw_status === 1"
            @click="concir(r.row)"
            >{{ $t("assets.revoke") }}</span
          >
        </template>
      </el-table-column>
      <template #empty>
        <Norecord />
      </template>
    </el-table>

    <Pagination
      :total="state.total"
      :size="state.listParam.limit"
      :current="state.curentPage"
      @currentchange="currentchange"
    />

    <Messagebox
      :text="$t('assets.revokeTip')"
      :dialog="state.dialog"
      :type="3"
      @onconfirm="confirm"
      @oncancer="onCancel"
    />
  </div>
</template>

<script>
import { onMounted, reactive, computed, watch } from "vue";
import { userRecordWithdraw, revokeWithdraw } from "@/api/assets";
import Norecord from "@/components/noRecord/NoRecord.vue";
import Messagebox from "@/components/messageBox/index.vue";
import Pagination from "@/components/pagination/index.vue";
import { useStore } from "vuex";
import { reduceFix } from "@/utils/precisionMath";

export default {
  name: "RecordCash",
  props: { type: Number },
  components: { Norecord, Messagebox, Pagination },
  setup(props) {
    const state = reactive({
      tableData: [],
      dialog: false,
      loading: false,
      flag: false,
      noteFlag: false,
      total: 0,
      curentPage: 1,
      concirItem: {},
      listParam: {
        page: 1,
        limit: 20,
      },
    });
    onMounted(() => {
      console.log('提现记录')
      getTable(props.type);
      isRevoke();
    });
    const $store = useStore();
    const systemInfo = computed(() => {
      return $store.state.user.systemInfo;
    });
    const isShowWithdrawNote = computed(() => {
      let list = $store.state.user.systemInfo;
      list.forEach((ele) => {
        if (ele.key === "withdraw_note") {
          state.noteFlag = ele.value;
        }
      });
      return state.noteFlag;
    });
    watch(systemInfo, () => {
      isRevoke();
    });
    watch(
      () => props.type,
      (val) => {
        console.log(val);
        currentchange(0);
      }
    );
    //是否需要显示撤销
    const isRevoke = () => {
      let list = $store.state.user.systemInfo;
      list.forEach((ele) => {
        if (ele.key === "cancel_withdraw_status") {
          state.flag = ele.value;
        }
      });
    };
    // 点击撤销
    const concir = (item) => {
      state.concirItem = item;
      state.dialog = true;
    };
    const getTable = (val) => {
      state.loading = true;
      state.listParam.type = val;
      userRecordWithdraw(state.listParam)
        .then((res) => {
          console.log(res,'res--')
          state.loading = false;
          state.tableData = res.data.data;
          state.total = res.data.total;
        })
        .catch(() => {
          state.loading = false;
        });
    };
    const currentchange = (val) => {
      state.listParam.page = val;
      console.log(props.type);
      getTable(props.type);
    };
    const confirm = () => {
      state.loading = true;
      revokeWithdraw(state.concirItem.id)
        .then((res) => {
          if (res.code === 200) {
            state.loading = false;
            state.dialog = false;
            getTable(props.type);
          }
        })
        .catch(() => {
          state.loading = false;
          state.dialog = false;
        });
    };
    const onCancel = () => {
      state.concirItem = {};
      state.dialog = false;
    };
    return {
      state,
      getTable,
      concir,
      currentchange,
      confirm,
      onCancel,
      isRevoke,
      systemInfo,
      reduceFix,
      isShowWithdrawNote,
    };
  },
};
</script>

<style scoped lang="less">
.jump {
  width: 44px;
  height: 20px;
  line-height: 20px;
  margin-inline-start: 10px;
}
.page {
  width: 20px;
  height: 20px;
}
</style>
